import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaRightMenu, WeaDialog, WeaTable, WeaFormItem, WeaInput, WeaSelect, WeaLocaleProvider } from "ecCom";
import { Row, Col, Modal } from "antd";
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核方案-引用方案指标
 * jiansong 2019/6/18
 */
@inject("programViewStore")
@observer
export default class ProgramBrowser extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.store = this.props.programViewStore;
    }

    render() {
        let { getType, getStatus, typeOption, statusOption, closeForm, showDialog, quoteTitle, data, total, quoteParams: { programname, programtype, status, current } } = this.store;
        const menu = [
            {
                key: 'close',
                icon: <i className='icon-coms-Clear' />,
                content: getLabel('31129', '取消'),
                onClick: () => { closeForm(); },
            }
        ]
        const columns = [
            {
                title: <span>{getLabel('33439', '名称')}</span>,
                dataIndex: 'programname', key: 'programname', width: '40%',
                render: (text, record) => {
                    return <a onClick={() => this.doQuote(record)}>{text}</a>
                }
            }, {
                title: <span>{getLabel('500401', '类型')}</span>,
                dataIndex: 'programtype', key: 'programtype', width: '20%',
                render: (text) => getType[text],
            }, {
                title: <span>{getLabel('23247', '状态')}</span>,
                dataIndex: 'status', key: 'status', width: '20%',
                render: (text) => getStatus[text],
            }, {
                title: <span>{getLabel('19548', '生效日期')}</span>,
                dataIndex: 'startdate', key: 'startdate', width: '20%',
            }
        ]
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@kxol43`}
                icon='icon-coms-implement'
                iconBgcolor='rgb(150, 53, 138)'
                style={{ width: 800, height: 550 }}
                hasScroll
                title={quoteTitle}
                visible={showDialog}
                onCancel={() => { closeForm(); }}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@wdx9ol`} datas={menu}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yx5aon`} style={{ padding: '15px' }}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9qn8b7`} span={8}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q6rzee`} label={getLabel('33439', '名称')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@pkcdjp`}
                                    value={programname}
                                    viewAttr={2}
                                    onChange={(val) => this.onSearchChange(val, "programname")}
                                />
                            </WeaFormItem>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@491doe`} span={8}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q5sgbw`} label={getLabel('500401', '类型')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6ekjbp`}
                                    options={typeOption}
                                    value={programtype}
                                    onChange={(val) => this.onSearchChange(val, "programtype")}
                                />
                            </WeaFormItem>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cqnbyp`} span={8}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@r0pd67`} label={getLabel('23247', '状态')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@f2ll4o`}
                                    options={statusOption}
                                    value={status}
                                    onChange={(val) => this.onSearchChange(val, "status")}
                                />
                            </WeaFormItem>
                        </Col>
                    </Row>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@acgpkc`}
                        columns={columns}
                        dataSource={data}
                        pagination={{
                            total: total,
                            showTotal: () => getLabel(509103, `共{total}条`).replace('{total}', total),
                            current: current,
                            onChange: (current) => this.onSearchChange(current, "current"),
                        }}
                    />
                </WeaRightMenu>
            </WeaDialog>
        )
    }

    //搜索条件变化
    onSearchChange(val, type) {
        this.store.quoteParamsChange(val, type);
    }

    //引用指标方案
    doQuote = (record) => {
        let { quoteProgram, operationQuote } = this.store;
        if (quoteProgram) {
            Modal.confirm({
                title: getLabel('386786', '信息确认'),
                content: <span>{getLabel('508969', '确定引用{program}?').replace('{program}', record.programname)}<span style={{ color: 'red' }}>（{getLabel('511377', '没有权限的指标和已禁用指标不会引用')} ）</span></span>,
                onOk: () => {
                    operationQuote('quote', record.id, this.props.updateNum);
                },
            });
        } else {
            Modal.confirm({
                title: getLabel('386786', '信息确认'),
                content: <span>{getLabel('508971', '确定引用{program}的考核指标?').replace('{program}', record.programname)}<span style={{ color: 'red' }}>（{getLabel('511377', '没有权限的指标和已禁用指标不会引用')} ）</span></span>,
                onOk: () => {
                    operationQuote('quoteindex', record.id, this.props.updateNum);
                },
            });
        }
    }


}